<!-- 商家详情 -->
<template>
	<view class="detail">
		<!-- 商家 -->
		<view class="detail_top">
			<view class="store">
				<view class="store_item">
					<view class="store_left">
						<img :src="notice_detail.img" alt />
					</view>
					<view class="store_right">
						<p>{{ notice_detail.name }}</p>
						<view class="label">
							<span class="span_left">代金券</span>
							<span class="span_left" v-if="notice_detail.status">餐券</span>
							<span class="span_right">已兑{{ notice_detail.num }}件</span>
						</view>
						<view class="bottom" v-for="(items,i) in notice_detail.text" :key="i" :class="{top : i == 0}">
						<!-- <view class="bottom"> -->
							<view class="icon">{{ items.label }}</view>
							<span>{{ items.value }}</span>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="address">
						<view class="left">
							<view class="left_name" @click="jumpMap(notice_detail.address)">
								<image class="icon" src="/static/img/common_ic_02.png"  ></image>
								<view class="place">{{notice_detail.address}}</view>
							</view>
						</view>
						<view class="right" @click="show_contact = true">
							<image class="icon" src="/static/img/tele.png"  ></image>
							<view class="concat">联系商家</view>
						</view>
					</view>
					<view class="time">
						<image src="/static/img/common_ic_07.png"  ></image>
						<view class="date">{{notice_detail.date}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<tabbar :showLabel="false" :active="active" :tab="tab" @change_status="change_status" ></tabbar>
		<!-- 优惠券 -->
		<view class="ticket" v-if="active === 0">
			<view class="card">
				<ticket-card :ticket="fun(ticket,active)" @jump="jump"></ticket-card>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="live" v-if="active === 1">
			<view class="title">猜你喜欢</view>
			<store :store_data="seller"></store>
		</view>
		<!-- 评价 -->
		<view class="comment" v-if="active === 2">
			<view class="title">评价</view>
			<comment :comments="comments" :count="count" :value="value"></comment>
		</view>
		<!-- 客服弹窗 -->
		<view class="contact_popup" v-if="show_contact" @touchmove.stop.prevent="">
			<view class="mask" @click="show_contact = false"></view>
			<view class="contact_content">
				<view class="text">
					<p>是否拨打客服热线</p>
					<span>客服在线时间：{{ online_time }}</span>
				</view>
				<view class="button_box">
					<view class="cancle" @click="show_contact = false">取消</view>
					<view class="call" @click="call">拨打</view>
				</view>
			</view>
		</view>
		<!-- 点击选择一栏的弹窗 -->
		<specification-popup ref="specificationPopup" @close="close"></specification-popup>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	const {
		goods,
		seller
	} = require("@/static/json/search.json");
	const {base_info, explain, specification} = require("@/static/json/sellerDetails.json");
	export default {
		computed: {
			specification() {
				return this.$store.state.sumbit.specification
			},
			...mapState({
				notice_detail: state => state.init.notice_detail,
			}),
		},
		data() {
			return {
				outlets_url:"/pages/seller/navigation/index",
				phoneNumber: '111111111',			// 客服电话
				online_time: '8:00-20:00', 			// 客服在线时间
				show_contact: false,				// 显示客服热线弹窗
				count: 5,
				value: 4,
				comments: [
					{
					id: 0,
					head_img: "/static/img/q.png",
					name: "用户A",
					date: "2021-03-20",
					detail: "服务态度挺好，就是质量稍差了点，总体还行吧",
					price: 380,
					star: "",
				},
					{
					id: 1,
					head_img: "/static/img/q.png",
					name: "用户A",
					date: "2021-03-20",
					detail: "服务态度挺好，就是质量稍差了点，总体还行吧",
					price: 380,
					star: "",
				},
					{
					id: 1,
					head_img: "/static/img/q.png",
					name: "用户A",
					date: "2021-03-20",
					detail: "服务态度挺好，就是质量稍差了点，总体还行吧",
					price: 380,
					star: "",
				},
				],
				seller: seller,
				active: 0,
				tab: [{
						id: 0,
						label: "优惠劵",
					},
					{
						id: 1,
						label: "猜你喜欢",
					},
					{
						id: 2,
						label: "评价",
					},
				],
				ticket: [{
						id: 0,
						name: "优惠券",
						text: "优惠券 10元代金券10元代金券",
						num: 8800,
						num1: "100000积分",
						num2: "800",
						status: 1,
						text1: '待使用',
						button_status: 1,
						url: "/pages/user/tickey/conversion/index",
						start_time: "2020年8月7日",
						end_time: "2020年8月31日"
					},
					{
						id: 1,
						name: "优惠券",
						text: "优惠券 10元代金券10元代金券",
						num: 8800,
						num1: "100000积分",
						num2: "800",
						status: 1,
						text1: '待使用',
						button_status: 1,
						url: "/pages/user/tickey/conversion/index",
						start_time: "2020年8月7日",
						end_time: "2020年8月31日"
					},
				],
				current: 0,
				list: [{
					cate_name: '优惠券'
				}, {
					cate_name: '猜你喜欢'
				}, {
					cate_name: '评价',
				}, ],
				store_data: [{
					id: 0,
					img: "https://kuaichuang.insunny.cc/temp_img/store1.png",
					store: "满缘香（东海泰禾广场）",
					num: 800,
					status: false,
					place: "泉州市丰泽区东海泰禾广场2楼088号2楼088号2222222",
					date: "周一至周日 08:00-23:00",
					text: [{
						id: 0,
						label: "代",
						value: "100积分购10元代金券"
					}],
					url: "/pages/pagesBusiness/business_details/index"
				}, ],
			};
		},
		mounted() {},
		beforeDestroy() {
			// 选择规格弹窗label下标恢复-1
			this.$refs.specificationPopup._data.specification.select_list.forEach(item => {
				item.active = -1
			})
		},
		methods: {
			jumpMap(val) {
				// console.log(val,'val')
				uni.navigateTo({
					url: this.outlets_url + '?address=' + val
				})
			},
			// 拨打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				})
				this.show_contact = false
			},
			// 导航栏返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 点击选择一栏，弹出对应弹窗
			show_specification() {
				this.$refs.specificationPopup._data.show = true
			},
			change_status(index) {
				this.active = index
			},
			fun(val, active) {
				var arr = []
				val.forEach((item, index) => {
					if (item.text1 !== '已过期' && item.text1 !== '已使用' && active === 0) {
						arr.push(item)
					} else if (item.text1 === '已使用' && active === 1) {
						arr.push(item)
					} else if (item.text1 === '已过期' && active === 2) {
						arr.push(item)
					}
				});
				return arr
			},
			jump(val, text1) {
				if (text1 !== "已过期" && text1 !== "已使用") {
					uni.navigateTo({
						url: val
					})
				} else {
					// uni.showToast({
					//     title: '该卷不可使用',
					//     duration: 2000,
					// 	// icon: none,

					// });
					uni.showModal({
						title: '提示',
						content: '该卷不可使用',
						// success: function (res) {
						//     if (res.confirm) {
						//         console.log('用户点击确定');
						//     } else if (res.cancel) {
						//         console.log('用户点击取消');
						//     }
						// }
					});
				}
			}
		}

	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>
